<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5 computed用法</title>
</head>
<body>

<div id = "app">
    <p>First Name: {{firstName}}</p>
    <p>Last Name: {{lastName}}</p>
    <p>Full Name: {{fullName}}</p>
</div>
<script src="js/vue.js"></script>
<!--
直接使用 computed 属性的名字（如 fullName），就可以获取返回的值，不需要加括号。
	•	computed 属性的返回值就是它函数中 return 的结果。
	•	它会自动根据依赖的数据进行更新，并且缓存结果，直到依赖的数据发生变化。
-->
<script>
    let vm = new Vue({
        el:"#app",
        data:{
          firstName: "John",
          lastName: "Doe"
        },
        computed:{
            fullName(){
                return this.firstName + ""+this.lastName;
            }
        }
    })
</script>

</body>
</html>